<template>
  <div class="video-generator">
    <el-card class="upload-card">
      <template #header>
        <div class="card-header">
          <h2>PPT视频生成</h2>
        </div>
      </template>
      
      <el-upload
        class="upload-area"
        drag
        action="/api/generate"
        :headers="headers"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :show-file-list="false"
        accept=".ppt,.pptx"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 PPT/PPTX 文件，且不超过 50MB
          </div>
        </template>
      </el-upload>

      <div v-if="generating" class="generating-status">
        <el-progress 
          :percentage="progress" 
          :status="progress === 100 ? 'success' : ''"
        />
        <p class="status-text">{{ statusText }}</p>
      </div>

      <div v-if="error" class="error-message">
        <el-alert
          :title="error"
          type="error"
          show-icon
          @close="error = ''"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const generating = ref(false)
const progress = ref(0)
const statusText = ref('准备中...')
const error = ref('')

const headers = {
  // 如果需要认证，在这里添加token
}

const beforeUpload = (file: File) => {
  const isPPT = file.type === 'application/vnd.ms-powerpoint' || 
                file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
  const isLt50M = file.size / 1024 / 1024 < 50

  if (!isPPT) {
    ElMessage.error('只能上传 PPT/PPTX 文件！')
    return false
  }
  if (!isLt50M) {
    ElMessage.error('文件大小不能超过 50MB！')
    return false
  }

  generating.value = true
  progress.value = 0
  statusText.value = '正在上传文件...'
  error.value = ''
  return true
}

const handleSuccess = (response: any) => {
  if (response.success) {
    progress.value = 100
    statusText.value = '视频生成成功！'
    ElMessage.success('视频生成成功！')
    
    // 下载视频文件
    const link = document.createElement('a')
    link.href = response.data.url
    link.download = 'presentation.mp4'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else {
    error.value = response.message || '视频生成失败'
    ElMessage.error(error.value)
  }
  generating.value = false
}

const handleError = (err: any) => {
  error.value = err.message || '上传失败，请重试'
  ElMessage.error(error.value)
  generating.value = false
}
</script>

<style scoped>
.video-generator {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.upload-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-area {
  width: 100%;
}

.el-upload {
  width: 100%;
}

.el-upload-dragger {
  width: 100%;
}

.generating-status {
  margin-top: 20px;
  text-align: center;
}

.status-text {
  margin-top: 10px;
  color: #606266;
}

.error-message {
  margin-top: 20px;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 7px;
}
</style> 